<!--
 * @Author: wwssaabb
 * @Date: 2021-09-10 09:56:04
 * @LastEditTime: 2021-09-16 15:24:20
 * @FilePath: \gshop-client\src\views\Shop\Shop.vue
-->
<template>
  <div class="navbar">
    <NavBar
      :leftArrow="true"
      bgImg="https://fuss10.elemecdn.com/f/5c/ead54394c3de198d3e6d3e9111bbfpng.png"
    ></NavBar>
  </div>
  <div class="content">
    <div class="shop-message">
      <div class="shop-logo">
        <img
          v-lazy="
            'https://fuss10.elemecdn.com/8/40/02872ce8aefe75c16d3190e75ad61jpeg.jpeg'
          "
          alt=""
          @click="popupShow('shopMessage')"
        />
      </div>
      <div class="shop-title" @click="popupShow('shopMessage')">
        <span class="brand" v-if="shopInfo.status === 1">品牌</span>
        <span class="name">{{ shopInfo.name }}</span>
        <Icon name="play" />
      </div>
      <div class="shop-info">
        <span>{{ shopInfo.rating }}</span>
        <span>月售{{ 980 }}单</span>
        <span>{{ "哇哇快递" }}</span>
        <span>{{ "约28分钟" }}</span>
        <span>{{ "距离1.2km" }}</span>
      </div>
      <div class="discounts" @click="popupShow('discounts', 'bottom')">
        <div class="discounts-introduce">
          <span v-if="shopInfo.is_new">首单</span>
          <span v-if="shopInfo.is_new"
            >新用户下单立减17元(不与其他活动同享优惠)</span
          >
          <span
            >8个优惠<Icon name="play" size="12" color="#6e6e6e"></Icon
          ></span>
        </div>
      </div>
    </div>
    <div class="shop-content">
      <Tabs color="#02a774" title-active-color="#02a774" :swipeable="true">
        <Tab title="点餐" class="shop-content-item"><Menu></Menu></Tab>
        <Tab title="评价" class="shop-content-item"><Comments></Comments></Tab>
        <Tab title="商家" class="shop-content-item"><Info></Info></Tab>
      </Tabs>
    </div>
  </div>
  <Popup
    class="discounts-wrap"
    :isShow="showPopup.isShow"
    :position="showPopup.position"
    :popupClose="popupClose"
  >
    <div class="discounts-content" v-if="showPopup.type === 'discounts'">
      <div class="title">优惠活动</div>
      <div class="list">
        <div class="item" v-for="item in discountsList" :key="item.id">
          <Tag :color="discountsTags[item.tag].color" size="medium">{{
            discountsTags[item.tag].name
          }}</Tag>
          <span>{{ item.content }}</span>
        </div>
      </div>
    </div>
    <div class="shop-info-wrap" v-else-if="showPopup.type === 'shopMessage'">
      <div class="shop-title">
        <span class="brand" v-if="shopInfo.status === 1">品牌</span>
        <span class="name">{{ shopInfo.name }}</span>
      </div>
      <div class="info">
        <span>
          <span>{{ shopInfo.rating }}</span>
          <span>评分</span>
        </span>
        <span>
          <span>{{ "980" }}</span>
          <span>月售</span>
        </span>
        <span>
          <span>{{ "哇哇专送" }}</span>
          <span>约28分钟</span>
        </span>
        <span>
          <span>{{ "5元" }}</span>
          <span>配送费用</span>
        </span>
        <span>
          <span>{{ "1.2km" }}</span>
          <span>距离</span>
        </span>
      </div>
      <div class="notice">
        <div class="split-line"><span>公告</span></div>
        <div class="notice-coneten">
          {{
            "是以粥为特色的中式营养快餐，自2004年10月18日创立“嘉和一品”品牌至今，不断优化管理，积极创新，立足于“贴近百姓生活，服务千万户”"
          }}
        </div>
      </div>
    </div>
  </Popup>
</template>

<script setup lang="ts">
import NavBar from "../../components/Navbar.vue";
import Menu from "./components/Menu.vue";
import Comments from "./components/Comments.vue";
import Info from "./components/Info.vue";
import Popup from "../../components/MyPopup.vue";
import { onMounted, ref, Ref, watch } from "vue";
import { Icon, Tag, Tab, Tabs } from "vant";
import router from "../../router";

const shopInfo = {
  name: "嘉禾一品（楼村店）",
  address: "北京市昌平区宏福苑温都水城F1",
  id: 1,
  latitude: 40.10039,
  longitude: 116.36868,
  location: [116.36868, 40.10039],
  phone: "13437850035",
  category: "快餐便当/简餐",
  supports: [
    {
      description: "已加入“外卖保”计划，食品安全有保障",
      icon_color: "999999",
      icon_name: "保",
      id: 7,
      name: "外卖保",
      _id: "5a5859a19c2bc57d52df30b3",
    },
    {
      description: "准时必达，超时秒赔",
      icon_color: "57A9FF",
      icon_name: "准",
      id: 9,
      name: "准时达",
      _id: "5a5859a19c2bc57d52df30b2",
    },
    {
      description: "该商家支持开发票，请在下单时填写好发票抬头",
      icon_color: "999999",
      icon_name: "票",
      id: 4,
      name: "开发票",
      _id: "5a5859a19c2bc57d52df30b1",
    },
  ],
  status: 1,
  recent_order_num: 106,
  rating_count: 961,
  rating: 4.7,
  promotion_info: "欢迎光临，用餐高峰请提前下单，谢谢",
  piecewise_agent_fee: {
    tips: "配送费约¥5",
  },
  opening_hours: ["8:30/20:30"],
  license: {
    catering_service_license_image: "160e91e17fa2164.png",
    business_license_image: "160e91e0a9f2163.png",
  },
  is_new: true,
  is_premium: true,
  image_path: "16018a5c08533.jpeg",
  identification: {
    registered_number: "",
    registered_address: "",
    operation_period: "",
    licenses_scope: "",
    licenses_number: "",
    licenses_date: "",
    legal_person: "",
    identificate_date: null,
    identificate_agency: "",
    company_name: "",
  },
  float_minimum_order_amount: 20,
  float_delivery_fee: 5,
  distance: "2120.1公里",
  order_lead_time: "31小时24分钟",
  description: "sad",
  delivery_mode: {
    color: "57A9FF",
    id: 1,
    is_solid: true,
    text: "硅谷专送",
  },
  activities: [],
  __v: 0,
};

//商店、优惠popup
type PopupPosition = "top" | "left" | "bottom" | "right" | "center" | undefined;
type popupType = "discounts" | "shopMessage" | "goods" | undefined;
type PopupInfo = {
  isShow: boolean;
  position: PopupPosition;
  type: popupType;
};
const showPopup: Ref<PopupInfo> = ref<PopupInfo>({
  isShow: false,
  position: "bottom",
  type: "discounts",
});
const popupShow = (type?: popupType, position?: PopupPosition): void => {
  if (type !== undefined) {
    showPopup.value.type = type;
    showPopup.value.position = position;
  }
  showPopup.value.isShow = !showPopup.value.isShow;
};
//popup关闭时的回调
const popupClose = () => (showPopup.value.isShow = false);

const discountsTags = [
  { name: "首单", color: "#70bc46" },
  { name: "满减", color: "#f07373" },
  { name: "特价", color: "#f1884f" },
];
const discountsList = [
  { id: 1, content: "新用户下单立减17元(不与其他活动同享优惠)", tag: 0 },
  { id: 2, content: "满35减19，满65减35", tag: 1 },
  { id: 3, content: "【立减19.5元】欢乐小食餐", tag: 2 },
  { id: 4, content: "【立减29元】火烤菠萝皇堡双人餐", tag: 2 },
  { id: 5, content: "【立减16.5元】火烤菠萝皇堡双人餐", tag: 2 },
  { id: 6, content: "【立减15元】经典安格斯单人餐", tag: 2 },
  { id: 7, content: "【立减11.95元】皇堡双人餐", tag: 2 },
  { id: 8, content: "【立减19.8元】半价单人餐", tag: 2 },
];
</script>

<style lang="scss" scoped>
.shop-message {
  position: relative;
  .shop-logo {
    position: relative;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      position: absolute;
      width: 70px;
      height: 70px;
      border-radius: 5px;
      top: -50%;
      z-index: 100;
      border: 1px solid #eee;
    }
  }

  .shop-title {
    position: relative;
    margin-top: -30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    z-index: 150;

    .brand {
      padding: 0 5px;
      background-color: #ffe437;
      font-size: 12px;
      font-family: "Microsoft YaHei";
      margin-right: 10px;
      border-radius: 2px;
    }
    .name {
      display: inline-block;
      width: calc(64vw - 40px);
      font-weight: bold;
      font-size: 20px;
      font-family: "Microsoft YaHei";
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .shop-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    span {
      font-size: 12px;
      color: #555;
      margin-right: 5px;
    }
  }
  .discounts {
    display: flex;
    justify-content: center;
    align-items: center;
    .discounts-introduce {
      white-space: nowrap;
      width: 80vw;
      border: 1px solid #eee;
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      span {
        font-size: 12px;
        font-family: "Microsoft YaHei";
        color: #6e6e6e;
        &:first-child {
          background-color: #70bc46;
          font-size: 11px;
          color: #fff;
          margin: 5px;
          padding: 1px 2px;
          border-radius: 2px;
        }
        &:nth-child(2) {
          display: inline-block;
          width: calc(80vw - 116px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &:last-child {
          i {
            transform: rotate(90deg);
          }
        }
      }
    }
  }
}

.shop-content {
  margin-top: 10px;
  .shop-content-item {
    display: flex;
    border-top: 1px solid #eee;
  }
}
.discounts-wrap {
  position: relative;
  overflow: hidden;
  background-color: transparent;

  .discounts-content {
    width: 100vw;
    height: 40vh;
    background-color: #fff;
    padding: 20px;
    overflow: hidden;
    .title {
      font-weight: bold;
      font-size: 20px;
      font-family: "Microsoft YaHei";
      padding-bottom: 20px;
      text-align: center;
      color: #333;
    }
    .list {
      height: calc(40vh - 86px);
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 4px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #939393;
      }
      &::-webkit-scrollbar-track {
        background-color: #c4c4c4;
      }

      .item {
        margin-bottom: 15px;
        span {
          font-size: 12px;
          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }
  }

  .shop-info-wrap {
    position: relative;
    width: 90vw;
    height: auto;
    padding: 20px;
    overflow: hidden;

    .shop-title {
      width: 64vw;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 50%;
      transform: translateX(-50%);

      .brand {
        padding: 0 5px;
        background-color: #ffe437;
        font-size: 12px;
        font-family: "Microsoft YaHei";
        margin-right: 10px;
        border-radius: 2px;
      }
      .name {
        display: inline-block;
        width: calc(64vw - 40px);
        font-weight: bold;
        font-size: 20px;
        font-family: "Microsoft YaHei";
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .info {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-bottom: 10px;

      & > span {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span {
          font-size: 12px;
          color: #888;
          &:first-child {
            font-weight: bold;
            font-size: 14px;
            font-family: "Microsoft YaHei";
            color: #000;
            margin-bottom: 5px;
          }
        }
      }
    }
    .notice {
      .split-line {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;

        span {
          position: absolute;
          color: #aaa;
          &::after {
            position: absolute;
            content: "";
            width: 30px;
            height: 1px;
            background-image: linear-gradient(to left, #000, transparent 100%);
            top: 50%;
            left: -35px;
            transform: translateY(-50%) scaleY(0.5);
          }
          &::before {
            position: absolute;
            content: "";
            width: 30px;
            height: 1px;
            background-image: linear-gradient(to right, #000, transparent 100%);
            top: 50%;
            right: -35px;
            transform: translateY(-50%) scaleY(0.5);
          }
        }
      }
      .notice-coneten {
        color: #666;
      }
    }
  }
}

:deep(.van-sidebar-item) {
  background-color: #f3f5f7;
}
:deep(.van-sidebar-item--select) {
  color: #02a774;
  background-color: #fff;
  &::before {
    background-color: #02a774;
  }
}
</style>
